import React, { Component } from "react";
import Child from "./Child";

export class Parent extends Component {
  state = {
    // 新闻列表
    newsList: [
      {
        id: 1,
        title: '坚定不移走中国特色社会主义法治道路',
        author: '新华社',
        likeCount: 774
      },
      {
        id: 2,
        title: '年度法治人物——倪伯苍',
        author: '央视网',
        likeCount: 13
      },
      {
        id: 3,
        title: '岁末年终 愿这份“温良”伴你乘风破浪',
        author: '央视新闻客户端',
        likeCount: 165
      },
    ]
  }

  // 修改点赞数量
  updateLikeCount = (id, likeCount) => {
    this.setState({
      newsList: this.state.newsList.map(item=>{
        if ( item.id === id ) {
          // 修改
          return {
            ...item,
            likeCount
          }
        } else {
          return item
        }
      })
    })
  }

  render() {
    return (
      <div className="parent">
        <h1>今日要闻</h1>
        {/* 使用子组件 */}
        {this.state.newsList.map(item=>{
          // {...item} ===> id={} title={} author={} likeCount={}
          // 将一个对象展开绑定再组件上
          return <Child key={item.id} {...item} updateLikeCount={this.updateLikeCount} />
        })}
      </div>
    );
  }
}

export default Parent;
